<template>
<view>
	<uni-card :is-shadow="false">
		<uni-section title="事件详情" type="line">
			<uni-section title="事件">
				<template v-slot:right>
					{{ info.warnType?info.warnType:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="事件时间">
				<template v-slot:right>
					{{ info.eventTime?getdatatime(info.warnTime, 2):'-' }}
				</template>
			</uni-section>
			<uni-section title="设备">
				<template v-slot:right>
					<view v-for="(item, index) in info.device">
						<uni-card :title="item.deviceName" :is-shadow="false">
							<view class="content">
								<!-- :extra="1" -->
								<view class="card_bottom_view"><span class="card_bottom_span">设备采集值:</span><span>{{ item.concentration }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">检测对象:</span><span>{{ item.detection }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">数据单位:</span><span>{{ item.unit }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">通道信息:</span><span>{{ item.route }}</span></view>
							</view>
						</uni-card>
					</view>
				</template>
			</uni-section>
			<uni-section title="整改人">
				<template v-slot:right>
					{{ info.rectifierName?info.rectifierName:'-' }}
				</template>
			</uni-section>
			<uni-section title="整改时间">
				<template v-slot:right>
					{{ info.updateTime?getdatatime(info.updateTime, 2):'-' }}
				</template>
			</uni-section>
			<uni-section title="整改描述">
				<template v-slot:right>
					{{ info.detail?info.detail:'-' }}
				</template>
			</uni-section>
			<uni-section title="整改证明">
				<template v-slot:right>
					<scroll-view v-if="info.url" style="height: 170rpx;width: 480rpx; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
						<image v-for="(item, index) in info.url.split(',')" :key="index" :src="item" @click="swClick(info.url.split(','), index)" class="rounded-1  mr-1" style="width: 170rpx; height: 170rpx;margin-right: 10px;"></image>
					</scroll-view>
				</template>
			</uni-section>
		</uni-section>
	</uni-card>
	
	<uni-card v-show="show" :is-shadow="false">
		<uni-section title="操作" type="line">
			<button class="reject_button" @click="submit">审核</button>
		</uni-section>
	</uni-card>
	
	<view v-if="perView">
		<view class="mask">
			<view @click="guanClick()" style="font-size: 30px;bottom: 60px;position: absolute;">
				<uni-icons type="closeempty" size="30" color="#FFF"></uni-icons>
			</view>
			<swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
				<swiper-item v-for="(x, y) in imageList" :key="y">
					<view class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="page" v-if="imageList.length>0">{{ current + 1 }} / {{ imageList.length }}</view>
	</view>
</view>
</template>

<script>
import {getGeneralUserList, getEventDictList, getRectifyDetail, getEventDetailById, processEvent, getDetectionObjectDictList, getDataUnitDictList,} from "@/api/system/uniapp.js"
	export default {
		data() {
			return {
				deptId: uni.getStorageSync('storage_data').vuex_deptid,
				info: {},
				userList: [],
				monitorList: [],
				dataUnitList: [],
				userId: null,
				createBy: uni.getStorageSync('storage_data').vuex_userId,
				show: true,
				perView: false,
				current: 0,
				imageList: [],
				duration: 500,
				autoplay: false,
				circular: true,
				indicatorDots: false,
			}
		},
		onLoad: function(option) {
			this.info = JSON.parse(option.row)
			this.getRectifyDetail()
			this.geteventCode(this.info.eventCode).then(res => {this.info.eventCode = res})
			this.getEventDetailById()
			this.getGeneralUserList()
		},
		methods: {
			changeSwiper(e){
				this.current = e.detail.current
			},
			submit(){
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				processEvent({id: this.info.id}).then(res => {
					if(res.code == 200){
						uni.$emit('examine',{msg:'页面更新', index: this.info.index})
						uni.showToast({title: "上报成功!",icon: "success",position: 'bottom'})
						this.show = false;
						uni.hideLoading()
					}else{
						uni.showToast({title: '上报失败！',icon: 'error',duration:2000});
						uni.hideLoading()
					}
				})
			},
			getRectifyDetail(){
				getRectifyDetail({id: this.info.id}).then(res => {
					console.log("res", res, this.info.id)
					this.info.url = res.data[0].image
					this.info.updateTime = res.data[0].rectifyTime
					this.info.detail = res.data[0].detail
					this.info.rectifierName = res.data[0].rectifierName
				})
			},
			userchange(e){
				this.userId = e
			},
			swClick(list,index) {
				if(list != undefined){
					this.current = index
					this.imageList = list
					this.perView = true
				}
			},
			guanClick(guan){
				this.perView = false
			},
			getEventDetailById(){
				getEventDetailById({id: this.info.id}).then(res => {
					res.data.map(i => {
						this.getmonitorObject(i.monitorObject).then(res => {i.monitorObject = res})
						this.getdataUnit(i.getdataUnit).then(res => {i.getdataUnit = res})
					})
					this.info.device = res.data
					console.log(this.info)
				})
			},
			getGeneralUserList(){
				getGeneralUserList({deptId: this.deptId}).then(res => {
					res.data.map(i => {
						this.userList.push({ value: i.userId, text: i.nickName })
					})
				})
			},
			async geteventCode(item){
				let data;
				await getEventDictList().then(res => {
					data = res.data
				})
				for(let i = 0;i < data.length;i++){
					if(data[i].code == item){
						return data[i].name
					}
				}
			},
			async getmonitorObject(item){
				if(this.monitorList.length == 0){
					await getDetectionObjectDictList().then(res => {
						this.monitorList = res.data
					})
				}
				for(let i = 0;i < this.monitorList.length;i++){
					if(this.monitorList[i].code == item){
						return this.monitorList[i].name
					}
				}
			},
			async getdataUnit(item){
				await getDataUnitDictList().then(res => {
					this.dataUnitList = res.data
				})
				for(let i = 0;i < this.dataUnitList.length;i++){
					if(this.dataUnitList[i].code == item){
						return this.dataUnitList[i].name
					}
				}
			},
			getdatatime(time, type) {
			  if (!time) {
				return "暂无数据";
			  }
			  let dt = null;
			  if(type == 1){
				dt = new Date(parseInt(time));
			  }else{
				dt = new Date(time);
			  }
			  const y = dt.getFullYear();
			  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
			  const d = (dt.getDate() + "").padStart(2, "0");
			  const hh = (dt.getHours() + "").padStart(2, "0");
			  const mm = (dt.getMinutes() + "").padStart(2, "0");
			  const ss = (dt.getSeconds() + "").padStart(2, "0");
			  return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`;
			},
		}
	}
</script>

<style lang="scss">
.reject_button{
	background-color: #ecf5ff;
	color: #409eff;
	border: 1px solid #b3d8ff;
	width: 100%;
	font-size: 14px;
	margin: 0 auto;
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	z-index: 5;
	> .my_swiper {
		width: 100%;
		height: 60vh;
		.bg_img {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position:center;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
